<template>
  <div class="father">
    <div class="aside">
      <sidetea></sidetea>
    </div>
    <div class="right">
      <div class="form">
      <a-button class="return" @click="back">返回</a-button>
      <h1 class="title">修改学生信息</h1>
      <ul>
        <li class="inputBox">
          <label for="">姓名：</label>
          <input type="text" placeholder="" v-model="name" />
        </li>
        <li class="labelBox">
          <label for="">班级：</label>
          <select v-model="class_id">
            <option
              v-for="(obj, index) in total_class"
              :key="index"
              :value="obj.class_id"
              >{{ obj.class_name }}</option
            >
          </select>
        </li>
        <li class="radioBox">
          <div class="sex">
            <label for="" style="font-size:17px">性别：</label>
            <input type="radio" value="0" v-model="sex" />男
            <input type="radio" value="1" v-model="sex" />女
          </div>
        </li>
        <li class="inputBox">
          <label for="">生日：</label>
          <input type="date" v-model="birth" />
        </li>
        <li class="infor">
          <span>{{ infor }}</span>
        </li>
        <li class="button">
          <a-button class="confirm" @click="submit">确定</a-button>
          <a-button class="reset" @click="reset">重置</a-button>
        </li>
      </ul>
    </div>  
    </div>  
  </div>
</template>

<script>
import { request } from "../../api/index";
import sidetea from "../../components/menu/sidetea";
export default {
  name: "informationUpdate",
  components: {sidetea },
  data() {
    return {
      id: this.$route.query.student_test_id,
      name: "",
      sex: "",
      class_id: "",
      birth: "",
      total_class: [],
      infor: "",
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      request({ method: "get", url: "/class/class_view" }).then((res) => {
        this.total_class = res.data.class_all;
        // console.log(this.total_class);
        this.class_id = this.total_class[0].class_id; //初始化班级
      });
      request({
        method: "post",
        url: "/user/person_information",
        data: {
          id : this.$route.query.student_test_id
        }
      })
      .then((res) => {
        if(res.data.message == 'success') {
          // console.log(res.data)
          this.name = res.data.name;
          this.birth = res.data.birthday;
          this.class_id = res.data.class_id;
          this.sex = res.data.sex;
          // console.log(this.birth)
        }
      })
    },
    reset() {
      this.$router.go(0)
    },
    submit() {
      if (
        this.name == "" ||
        this.birth == "" ||
        this.class_id == "" ||
        this.sex == ""
      ) {
        this.infor = "信息输入不完整！";
      }
      else {
        request({
          method: "post",
          url: "user/person_update",
          data: {
            id: this.id,
            name: this.name,
            class_id: this.class_id,
            birthday: this.birth,
            sex: this.sex,
          },
        })
          .then((res) => {
            if (res.data.message == "success") {
              alert("信息修改成功！");
              // this.$router.push("/start/login");
            }
          })
          .catch((err) => {
            alert("修改失败！");
          });
      }
    },
    back() {
      // this.$router.push("/checkStudents");
      this.$router.go(-1)
    }
  },
};
</script>

<style scoped>
  *{
    /*初始化 清除页面元素的内外边距*/
	  padding: 0;
	  margin: 0;
	  /*盒子模型*/
	  box-sizing: border-box;
  }
  .right {
	  /*弹性布局 让页面元素垂直+水平居中*/
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  /*让页面始终占浏览器可视区域总高度*/
	  height: 100vh;
	  /*背景渐变色*/
  }
  .form {
    text-align: center;
    width: 40%;
    height: 65%;
    border: 5px solid aquamarine;
    border-radius:25px;
  }
  li {
    list-style: none;
  }
  ul li.inputBox input, .labelBox select {
  /* margin-left: 15px; */
  border-radius: 5px;
  height: 30px;
  width: 140px;
  margin-top: 20px;
  /* padding-left: 10px; */
  }
  .radioBox,.button,.return, .title {
    margin-top: 20px;
  }
  .reset {
    margin-left: 25px;
  }
</style>